<html>

    <head>
        <title>canvas 绘制功能的实现</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			canvas{
				border: 1px solid #ddd;
				box-sizing: border-box;
				background-color: #f8f8f8;
			}
		</style>
    </head>
    <body>
        <canvas width="500" height="500" id="dra-board"></canvas>
    </body>
	
    <script>
        var canvas = document.getElementById('dra-board')
        var ctx = canvas.getContext('2d');
		//绘制文本、线条、矩形、圆形
		function drawRuler(){
			let w = canvas.clientWidth
			let h = canvas.clientHeight
			for (var i = 0; i < w; i=i+10) {
				ctx.lineWidth = 1
				ctx.strokeStyle = '#DDDDDD'
				ctx.moveTo(i,0)
				let line = i%50?15:30
				ctx.lineTo(i,line)
				ctx.stroke()
			}
			for (var i = 0; i < h; i=i+10) {
				ctx.lineWidth = 1
				ctx.strokeStyle = '#DDDDDD'
				ctx.moveTo(0,i)
				let line = i%50?15:30
				ctx.lineTo(line,i)
				ctx.stroke()
			}
		}
		drawRuler()
        //1.绘制线条  - stroke
		ctx.beginPath(); 
        ctx.lineWidth = 10
		ctx.moveTo(50,50)
		ctx.lineTo(250,50)
		ctx.strokeStyle = 'red'
		ctx.fillStyle = 'red'
		ctx.stroke()
		ctx.fill()
// 		
// 		
// 		canvas.onmouse=function(e){
// 			//划线到当前客户端的x与y座标
// 			ctx.lineTo(e.clientX, e.clientY);
// 			//执行画线
// 			ctx.stroke();
// 		}
		
    </script>
</html>